﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Thumbnail/Content Slider: jsCarouselV2.0.0</title>

    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="scripts/ui/jquery.ui.core.js"></script>
	<script src="scripts/ui/jquery.ui.widget.js"></script>
	<script src="scripts/ui/jquery.ui.position.js"></script>
	<script src="scripts/ui/jquery.ui.autocomplete.js"></script>
    <script src="scripts/jsCarousel-2.0.0.js" type="text/javascript"></script>

	<link href="style/main.css" rel="stylesheet" type="text/css" />
    <link href="style/slider.css" rel="stylesheet" type="text/css" />
    <link href="style/jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />
    <link href="style/jquery.ui.all.css">

<script type="text/javascript">
	
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		function split( val ) {
			return val.split( /,\s*/ );
		}
		function extractLast( term ) {
			return split( term ).pop();
		}

		$( "#tags" )
			// don't navigate away from the field on tab when selecting an item
			.bind( "keydown", function( event ) {
				if ( event.keyCode === $.ui.keyCode.TAB &&
						$( this ).data( "autocomplete" ).menu.active ) {
					event.preventDefault();
				}
			})
			.autocomplete({
				minLength: 0,
				source: function( request, response ) {
					// delegate back to autocomplete, but extract the last term
					response( $.ui.autocomplete.filter(
						availableTags, extractLast( request.term ) ) );
				},
				focus: function() {
					// prevent value inserted on focus
					return false;
				},
				select: function( event, ui ) {
					var terms = split( this.value );
					// remove the current input
					terms.pop();
					// add the selected item
					terms.push( ui.item.value );
					// add placeholder to get the comma-and-space at the end
					terms.push( "" );
					this.value = terms.join( ", " );
					return false;
				}
			});
	});
	
	$(document).ready(function() {
		setCarousel();
		setDropdown();
	});  
		
	// set carousel functionality	
	function setCarousel(){
		$('#user_recipes_carousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, circular: true, masked: false, itemstodisplay: 7, orientation: 'h', circular: true});
		$('#user_badges_carousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, circular: true, masked: false, itemstodisplay: 7, orientation: 'h', circular: true });
		
		setRecipeHover(); // add hover effect to each recipe
	}

	function setRecipeHover(){
		$(".recipe-details").parent("div").mouseenter(function(){
			$(this).children(".recipe-details").fadeIn();
		})
		.click(function(){ // reveal recipe details on click
			alert($(this).children(".recipe-details").html());				
		});
		$(".recipe-details").parent("div").mouseleave(function(){
			$(this).children(".recipe-details").fadeOut();										
		});	
	}

// set dropwdown effect to each input button/div pairs
function setDropdown(){
	// reveal each dropdown menu
	$(".dropdown").click(function(event){
		event.stopPropagation();
		$(this).next("div").slideToggle("fast").children("ul").slideToggle("fast");
		
	});
	
	// set order
	$(".dropdown").next("div").children("ul").children("li").click(function(){
		var order = $(this).html();
		var prev_order = $(this).parent("ul").parent("div").prev(".dropdown").val();
		$(this).html(prev_order);
		$(this).parent("ul").parent("div").prev(".dropdown").val(order);
		$(this).parent("ul").parent("div").slideToggle("fast");
	});
	
	// close any open dropwdown menu when outside element clicked
	$("html").click(function(){
		$(".dropdown").next("div").slideUp("fast"); 
	});	
}
	
</script>
</head>
<body>
<div id="container">
	<div id="recent_activity">
    	<h5>Recent Activity</h5>
    </div><!--recent activity-->

	<div id="user_recipes">
    	<h5>Your Recipes</h5>
        <div class="filter">
        		<div class="ui-widget">
            		<input id="tags" type="text" title="Filter recipes by tags" />
                </div>
            <div>
            	
              <input class="dropdown" type="button" value="Oldest" title="Sort options" />
                <div class="dropdown-options">
                    <ul>
                        <li>Newest</li>
                        <li>Highest Rated</li>
                        <li>Lowest Rated</li>
                    </ul>
                </div>
            </div>
        </div><!--filter-->
      <div id="user_recipes_carousel">
            <div>
                <img alt="" src="images/food/img_1.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_2.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_3.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_4.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_5.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_6.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_7.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_8.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_9.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_10.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_11.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_12.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_13.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_14.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_15.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
            <div>
                <img alt="" src="images/food/img_16.jpg" /><br />
                
                <div class="recipe-details">Title Goes Here</div>
            </div>
        </div><!-- carousel -->
    </div><!-- user's recipes -->
    
    <div id="user_badges">
    	<h5>Your Badges</h5>
        <div id="user_badges_carousel">
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
            <div>
                <img alt="" src="images/badges/blank.png" /><br />
                </div>
    	</div><!--carousel-->
    </div><!-- user's badges -->
    
</div><!-- container -->
</body>
</html>
